<template>
  <div>
    <h1>密码登录</h1>
    <div>
      <van-form @submit="onSubmit">
        <van-field v-model="username" placeholder="手机/用户名" style="backgroundColor:#fff"/>
        <van-field v-model="password" :type="isPassword?'password':'text'" placeholder="密码" clearable>
            <template v-slot:right-icon>
              <span @click="isPassword = !isPassword">
                   <van-icon name="eye" v-if="isPassword"/>
                   <van-icon name="closed-eye" v-else />
              </span>
            </template>
          </van-field>
        <div style="margin: 16px">
          <van-button round block type="info" native-type="submit">登录</van-button>
        </div>
      </van-form>
    </div>
    <div class="footer">
      <span>手机号登录</span>
      <span>忘记密码</span>
    </div>
    <div class="end">
      <van-checkbox v-model="checked"></van-checkbox>已阅读并同意<span>《用户服务协议》</span>、<span>《隐私政策》</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: "admin",
      password: "123456",
      isPassword:true,
      checked:true
    };
  },
  methods: {
    onSubmit() {
      console.log('submit');
    },
  },
};
</script>

<style scoped>
html,body{
  height: 100%;
}
span {
  color: skyblue;
  font-size: 14px;
}

.footer {
  display: flex;
  justify-content: space-between;
  margin: 20px;
}
h1 {
  margin: 20px;
}
.van-checkbox{
  width: 22px;
}
.end {
  margin-top: 250px;
  display: flex;
}
</style>